<script setup>
import {useWebInfo} from "@/store/webinfo.js";
import {ElMessage} from "element-plus";

const webStore = useWebInfo();
const {webInfo} = webStore;
const BASE_URL_IMG = import.meta.env.VITE_APP_IMG_API;
const BASE_BED_URL = import.meta.env.VITE_APP_BED_IMG_API;
const handleCollect = () => {
  ElMessage.success("按CTRL+ D 键将本页加入书签!");
};
</script>

<template>
  <el-card class="box box-shadow">
    <img class="box-img" :src="BASE_BED_URL + '/2023/12/25/qj26g2.jpg'" alt="">
    <div class="user">
      <div class="avatar">
        <img :src="BASE_URL_IMG + webInfo.authorAvatar" alt="" class="userAvatar">
        <img class="bubble" :src="BASE_BED_URL + '/2023/12/25/qlp58c.png'" alt="">
      </div>
      <div class="username">
        <span>{{ webInfo.name }}</span>
      </div>
      <span class="desc">
        {{ webInfo.authorInfo }}
      </span>
      <div class="contact">
        <a>
          <el-tooltip class="box-item" effect="dark" placement="top" content="github">
            <img src="@/icons/svg/github.svg" alt="">
          </el-tooltip>
        </a>
        <a>
          <el-tooltip class="box-item" effect="dark" placement="top" content="gitee">
            <img src="@/icons/svg/gitee.svg" alt="">
          </el-tooltip>
        </a>
        <a>
          <el-tooltip class="box-item" effect="dark" placement="top" content="QQ">
            <img src="@/icons/svg/qq.svg" alt="">
          </el-tooltip>
        </a>
        <a>
          <el-tooltip class="box-item" effect="dark" placement="top" content="邮箱">
            <img src="@/icons/svg/email.svg" alt="">
          </el-tooltip>
        </a>
        <a>
          <el-tooltip class="box-item" effect="dark" placement="top" content="微博">
            <img src="@/icons/svg/weibo.svg" alt="">
          </el-tooltip>
        </a>
        <a>
          <el-tooltip class="box-item" effect="dark" placement="top" content="知乎">
            <img src="@/icons/svg/zhihu.svg" alt="">
          </el-tooltip>
        </a>
      </div>
      <div class="collect">
        <el-button class="btn" @click="handleCollect">加入书签</el-button>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="less">
.box {
  position: relative;
  width: 100%;
  height: 265px;
  background-color: var(--background-color);

  .box-img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 120px;
    object-fit: cover;
  }

  .user {
    position: relative;
    padding: 45px 15px 15px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .avatar {
      position: relative;
      width: 75px;
      height: 75px;
      margin-bottom: 12px;

      .userAvatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: block;
        overflow: hidden;
        padding: 5px;
        object-fit: cover;
        transition: transform .5s;
        z-index: 20;

        &:hover {
          transform: rotate(360deg);
        }
      }

      .bubble {
        position: absolute;
        top: -20px;
        right: -18px;
        width: 110px;
        height: 120px;
        z-index: 10;
      }
    }

    .username {
      margin-bottom: 5px;
      margin-top: 8px;
      color: var(--theme-color);
      display: block;
      font-size: 16px;
      font-weight: 500;
    }

    .desc {
      width: 100%;
      font-size: 14px;
      color: var(--text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      background: radial-gradient(circle at 49.86% 48.37%, #0090ff 0, #0089ff 3.33%, #3a82ff 6.67%, #717aff 10%, #9371fb 13.33%, #ae67ef 16.67%, #c45de1 20%, #d652d2 23.33%, #e448c2 26.67%, #ef3eb0 30%, #f7369e 33.33%, #fd318c 36.67%, #ff317a 40%, #ff3569 43.33%, #fd3d57 46.67%, #f94646 50%, #f35035 53.33%, #ea5a22 56.67%, #e16308 60%, #d56d00 63.33%, #c97500 66.67%, #bb7d00 70%, #ac8300 73.33%, #9d8900 76.67%, #8c8f00 80%, #7a9300 83.33%, #669700 86.67%, #4f9b00 90%, #309e0e 93.33%, #00a029 96.67%, #00a23d 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .contact {
      margin-top: 6px;
      text-align: center;
      font-size: 14px;
      border-top: 1px solid var(--border-line);
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      a {
        display: inline-block;
        margin: 0 10px;
        transition: all 0.5s;

        &:hover {
          transform: scale(1.2);
        }

        img {
          width: 18px;
          height: 18px;
        }
      }
    }

    .collect {
      margin-top: 8px;
      width: 100%;

      .btn {
        position: relative;
        padding: 10px 20px;
        width: 100%;
        height: 30px;
        line-height: 8px;
        background-color: transparent;
        border-radius: 5px;
        border: 2px solid var(--theme-color);
        transition: all 1s;
        color: var(--theme-color);
        font-weight: 700;
        overflow: hidden;
        z-index: 1;

        &:hover {
          color: white;

          &::before {
            width: 180%;
          }
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -30px;
          width: 0;
          height: 100%;
          background-color: var(--theme-color);
          transform: skewX(45deg);
          transition: all 1s;
          z-index: -1;
        }
      }
    }
  }
}
</style>